<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
    body {
        background-color: grey;
    }

    .div1 {
        background-color: #fff;
        width: 200px;
        height: 100px;
        margin: 0 auto;
        padding: 5px 15px;
    }
</style>

<body>
    <template id="sonTemp">
        <div class="div1">
            <p>
                <slot name='oneImg'></slot>
                <slot name='twoImg'></slot>
                <a href="https://www.yuque.com/" style="text-decoration: none;">{{top}}</a>
            </p>
        </div>
    </template>
    <!-- son -->
    <script>
        const son = {
            template: '#sonTemp',
            props: ['top', 'bottom']
        }
        Vue.component('son', son)

    </script>

    <template id="fatherTemp">
        <div>
            <son top='个人信息维护'>
                <img src="./bao.png" alt="" slot='oneImg'>
            </son>
            <son top='关于我们'>
                <img src="./naiping.png" alt="" slot='twoImg'>
            </son>
        </div>
    </template>
    <!-- father -->
    <script>
        const father = {
            template: '#fatherTemp',
        }

        Vue.component('father', father)
    </script>

    <div id='app'>
        <father></father>
        <slot></slot>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>

</html>